<template>
  <div>
    <el-row
      v-if="btnConf.show"
      :type="btnConf.type != null ? btnConf.type : btnConfBak.rowType"
      :gutter="btnConf.gutter != null ? btnConf.gutter : btnConfBak.gutter"
      :justify="btnConf.justify != null ? btnConf.justify : btnConfBak.justify"
      :align="btnConf.align != null ? btnConf.align : btnConfBak.align"
      :tag="btnConf.tag != null ? btnConf.tag : btnConfBak.tag"
      :style="btnConf.style"
      class="myTableRow"
    >
      <el-button
        v-for="(btnItem, btnIndex) in btnConf.buttons != null
          ? btnConf.buttons
          : btnConfBak.buttons"
        v-show="btnItem.show != null ? btnItem.show : btnConfBak.show"
        :key="btnIndex"
        :size="btnItem.size != null ? btnItem.size : btnConfBak.size"
        :type="btnItem.type != null ? btnItem.type : btnConfBak.type"
        :plain="btnItem.plain != null ? btnItem.plain : btnConfBak.plain"
        :round="btnItem.round != null ? btnItem.round : btnConfBak.round"
        :circle="btnItem.circle != null ? btnItem.circle : btnConfBak.circle"
        :loading="
          btnItem.loading != null ? btnItem.loading : btnConfBak.loading
        "
        :disabled="
          btnItem.disabled != null ? btnItem.disabled : btnConfBak.disabled
        "
        :icon="btnItem.icon != null ? btnItem.icon : btnConfBak.icon"
        :autofocus="
          btnItem.autofocus != null ? btnItem.autofocus : btnConfBak.autofocus
        "
        :native-type="
          btnItem.nativeType != null
            ? btnItem.nativeType
            : btnConfBak.nativeType
        "
        :style="btnItem.style"
        @click="btnClick(btnItem)"
      >
        {{ btnItem.name }}
      </el-button>
    </el-row>
    <el-table
      v-loading="data.records == null"
      :data="data.records"
      :height="
        tableConf.height != null ? tableConf.height : tableConfBak.height
      "
      :size="tableConf.size != null ? tableConf.size : tableConfBak.size"
      element-loading-text="加载数据我是认真的..."
    >
      <el-table-column
        v-for="(tItem, tIndex) in columns"
        :key="tIndex"
        :label="tItem.label"
        :type="tItem.type"
        :index="tItem.index"
        :prop="tItem.prop"
        :width="tItem.width != null ? tItem.width : tableConfBak.column.width"
        :align="tItem.align != null ? tItem.align : tableConfBak.column.align"
        :fixed="tItem.fixed != null ? tItem.fixed : tableConfBak.column.fixed"
        :show-overflow-tooltip="
          tItem.showOverflowTooltip != null
            ? tItem.showOverflowTooltip
            : tableConfBak.column.showOverflowTooltip
        "
        :header-align="
          tItem.headerAlign != null
            ? tItem.headerAlign
            : tableConfBak.column.headerAlign
        "
      >
        <template v-if="tItem.type === 'expand'" v-slot="props">
          <slot :row="props.row" name="expand"></slot>
        </template>
      </el-table-column>
      <el-table-column
        v-if="optConf.optShow != null ? optConf.optShow : optConfBak.optShow"
        :width="
          optConf.width != null ? optConf.width : tableConfBak.column.width
        "
        :align="
          optConf.align != null ? optConf.align : tableConfBak.column.align
        "
        :fixed="
          optConf.fixed != null ? optConf.fixed : tableConfBak.column.fixed
        "
        :show-overflow-tooltip="
          optConf.showOverflowTooltip != null
            ? optConf.showOverflowTooltip
            : tableConfBak.column.showOverflowTooltip
        "
        :header-align="
          optConf.headerAlign != null
            ? optConf.headerAlign
            : tableConfBak.column.headerAlign
        "
        label="操作"
      >
        <template v-slot="scope">
          <el-link
            v-for="(btnItem, bIndex) in optConf.buttons != null
              ? optConf.buttons
              : optConfBak.buttons"
            :key="bIndex"
            :type="btnItem.type"
            :underline="
              btnItem.underline != null
                ? btnItem.underline
                : optConfBak.underline
            "
            :icon="btnItem.icon != null ? btnItem.icon : optConfBak.icon"
            class="myTableOptLink"
            @click="optClick(btnItem, scope.row, scope.$index)"
            >{{ btnItem.name }}</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row
      :type="pageConf.type != null ? pageConf.type : pageConfBak.type"
      :gutter="pageConf.gutter != null ? pageConf.gutter : pageConfBak.gutter"
      :justify="
        pageConf.justify != null ? pageConf.justify : pageConfBak.justify
      "
      :align="pageConf.align != null ? pageConf.align : pageConfBak.align"
      :tag="pageConf.tag != null ? pageConf.tag : pageConfBak.tag"
      :style="pageConf.style"
      class="myTablePageRow"
    >
      <el-pagination
        :current-page="data.current"
        :page-sizes="
          pageConf.pageSizes != null
            ? pageConf.pageSizes
            : pageConfBak.pageSizes
        "
        :page-size="data.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.total"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'MyTable',
  components: {},
  props: {
    data: {
      type: Object,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    tableConf: {
      type: Object,
      default() {
        return {}
      }
    },
    optConf: {
      type: Object,
      default() {
        return {}
      }
    },
    btnConf: {
      type: Object,
      default() {
        return {}
      }
    },
    pageConf: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      btnConfBak: {
        gutter: 0,
        rowType: 'flex',
        justify: 'start',
        align: 'middle',
        plain: false,
        round: false,
        circle: false,
        loading: false,
        disabled: false,
        autofocus: false,
        nativeType: 'button',
        show: true,
        size: 'small',
        type: 'primary',
        buttons: []
      },
      optConfBak: {
        gutter: 10,
        type: 'flex',
        justify: 'start',
        align: 'middle',
        underline: false,
        optShow: false,
        buttons: []
      },
      tableConfBak: {
        size: 'medium',
        optShow: false,
        buttons: [],
        column: {
          align: 'center',
          headerAlign: 'center'
        }
      },
      pageConfBak: {
        gutter: 0,
        type: 'flex',
        justify: 'end',
        align: 'middle',
        pageSizes: [10, 20, 30, 50, 100]
      }
    }
  },
  methods: {
    btnClick(btnItem) {
      this.$emit('btnClick', btnItem)
    },
    sizeChange(...args) {
      this.$emit('sizeChange', ...args)
    },
    currentChange(...args) {
      this.$emit('currentChange', ...args)
    },
    optClick(...args) {
      this.$emit('optClick', ...args)
    }
  }
}
</script>

<style scoped>
.myTableRow {
  margin-bottom: 20px;
}
.myTablePageRow {
  margin-top: 30px;
}
.myTableOptLink {
  margin: 0 5px;
}
</style>
